.decklist {
	padding-left: 0;
}

.card-tile {
	color: white;
	text-align: left;

	margin-top: 1px;
	text-shadow: -1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;

	.card-gem {
		height: 100%;
		float: left;
		position: relative;
		background-color: #315376;
		border-style: solid;
		border-color: black;
		border-width: 1px 0 1px 1px;

		.card-cost {
			position: absolute;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}

		&.rarity-common, &.rarity-free {
			background-color: #858585;
		}

		&.rarity-rare {
			background-color: #315376;
		}

		&.rarity-epic {
			background-color: #644C82;
		}

		&.rarity-legendary {
			background-color: #855C25;
		}
	}

	.card-frame {
		position: relative;
		border: solid 1px black;
		height: 100%;
		overflow: hidden;

		.card-fade-countbox {
			position: absolute;
			width: 100%;
			height: 100%;
			background: linear-gradient(65deg, rgba(49,49,9,1) 0%,rgba(49,49,49,1) calc(100% - 120px),rgba(49,49,49,0) calc(100% - 50px),rgba(49,49,49,0) 100%);
		}

		.card-fade-no-countbox {
			position: absolute;
			width: 100%;
			height: 100%;
			background: linear-gradient(65deg, rgba(49,49,9,1) 0%,rgba(49,49,49,1) calc(100% - 96px),rgba(49,49,49,0) calc(100% - 26px),rgba(49,49,49,0) 100%);
		}

		.card-name {
			position: absolute;
			font-weight: bold;
			left: 5px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.card-image {
			position: absolute;
			height: 100%;
		}
	}

	.card-countbox {
		float: right;
		position: relative;
		background-color: rgb(49,49,49);
		border-left: solid 1px black;
		height: 100%;

		.card-legendicon {
			position: absolute;
			top: -1px;
		}

		.card-count {
			position: absolute;
			width: 100%;
			color: #f4d442;
			font-weight: bold;
			text-align: center;
		}
	}
}
